<template>
	<layout>
		<simple-toolbar :title="formData.contract_id ? $t('contract.modifyContract') : $t('contract.newContract')">
			<view class="returnToConfirm">
				<el-button @click="navBack">{{ $t('contract.return') }}</el-button>
				<el-button @click="confirm" type="primary" :disabled="success">{{ $t('contract.confirm') }}</el-button>
			</view>
		</simple-toolbar>
		<view class="pad-base form">
			<el-form :model="formData" :rules="rules" ref="formData" label-position="top">
				<el-form-item :label="$t('contract.contract_id')" prop="contract_num">
					<el-input v-model="formData.contract_num" :placeholder="$t('contract.contract_id_pla')"></el-input>
				</el-form-item>
				<el-form-item :label="$t('contract.last_name')" prop="last_name">
					<el-input v-model="formData.last_name" :placeholder="$t('contract.last_name_pla')"></el-input>
				</el-form-item>
				<el-form-item :label="$t('contract.first_name')" prop="first_name">
					<el-input v-model="formData.first_name" :placeholder="$t('contract.first_name_pla')"></el-input>
				</el-form-item>
				<el-form-item :label="$t('contract.email')" prop="email">
					<el-input v-model="formData.email" :placeholder="$t('contract.email_pla')"></el-input>
				</el-form-item>
				<el-form-item :label="$t('contract.start_date')" prop="start_date" class="formDate">
					<!-- <el-date-picker v-model="formData.start_date" value-format="yyyy-MM-dd" type="date" :placeholder="$t('contract.start_date_pla')"></el-date-picker> -->
					<el-date-picker v-model="startDate.year" type="year" format="yyyy" value-format="yyyy" @change="startDateChange" :placeholder="$t('global.year')"></el-date-picker>
					<el-date-picker v-model="startDate.month" type="month" format="MM" value-format="MM" @change="startDateChange" :placeholder="$t('global.month')"></el-date-picker>
					<el-date-picker v-model="startDate.day" type="date" format="dd" value-format="dd" @change="startDateChange" :placeholder="$t('global.day')"></el-date-picker>
				</el-form-item>
				<el-form-item :label="$t('contract.fund_date')" prop="fund_date" class="formDate">
					<!-- <el-date-picker v-model="formData.fund_date" value-format="yyyy-MM-dd" type="date" :placeholder="$t('contract.fund_date_pla')"></el-date-picker> -->
					<el-date-picker v-model="fundDate.year" type="year" format="yyyy" value-format="yyyy" @change="fundDateChange" :placeholder="$t('global.year')"></el-date-picker>
					<el-date-picker v-model="fundDate.month" type="month" format="MM" value-format="MM" @change="fundDateChange" :placeholder="$t('global.month')"></el-date-picker>
					<el-date-picker v-model="fundDate.day" type="date" format="dd" value-format="dd" @change="fundDateChange" :placeholder="$t('global.day')"></el-date-picker>
				</el-form-item>
				<el-form-item :label="$t('contract.total_tib')" prop="total_tib">
					<el-input v-model="formData.total_tib" type="number" :placeholder="$t('contract.total_tib_pla')">
						<template slot="suffix">TiB</template>
					</el-input>
				</el-form-item>
				<el-form-item :label="$t('contract.fee')" prop="fee">
					<el-input v-model="formData.fee" type="number" :placeholder="$t('contract.fee_pla')">
						<template slot="suffix">%</template>
					</el-input>
				</el-form-item>

				<el-form-item v-if="formData.id" :label="$t('contract.creater_email')" prop="creater_email">
					<el-input v-model="formData.creater_email" disabled></el-input>
				</el-form-item>
				<el-form-item v-if="formData.id" :label="$t('contract.is_active')" prop="is_active">
					<el-radio v-model="formData.is_active" :label="true">{{ $t('contract.effective') }}</el-radio>
					<el-radio v-model="formData.is_active" :label="false">{{ $t('contract.invalid') }}</el-radio>
				</el-form-item>
			</el-form>
		</view>
	</layout>
</template>

<script>
	import {
		newContract,
		updateContract
	} from "../../../js_sdk/uni-admin/contract.js"
	export default {
		data() {
			return {
				success: false,
				fundDate: {
					year: '',
					month: '',
					day: '',
				},
				startDate: {
					year: '',
					month: '',
					day: '',
				},
				formData: {
					contract_id: '',
					email: '',
					first_name: '',
					last_name: '',
					start_date: '',
					fee: '',
					fund_date: '',
					total_tib: '',
					// creater_email: '',
					is_active: 1
				},
				rules: {
					contract_num: [{
						required: true,
						// message: '请输入合同号',
						validator: (rule, value, callback) => {
							if (value === '') {
								callback(new Error(this.$t('contract.contract_id_pla')))
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}],
					last_name: [{
						required: true,
						// message: '请输入姓氏',
						validator: (rule, value, callback) => {
							if (value === '') {
								callback(new Error(this.$t('contract.last_name_pla')))
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}],
					first_name: [{
						required: true,
						// message: '请输入名字',
						validator: (rule, value, callback) => {
							if (value === '') {
								callback(new Error(this.$t('contract.first_name_pla')))
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}],
					email: [{
						required: true,
						// message: '请输入邮箱',
						validator: (rule, value, callback) => {
							if (value === '') {
								callback(new Error(this.$t('contract.email_pla')))
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}],
					start_date: [{
						required: true,
						// message: '请指定开始日期',
						validator: (rule, value, callback) => {
							if (value === '') {
								callback(new Error(this.$t('contract.start_date_pla')))
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}],
					// fund_date: [{
					// 	required: true,
					// 	// message: '请指定资金到账日期',
					// 	validator: (rule, value, callback) => {
					// 		if (value === '') {
					// 			callback(new Error(this.$t('contract.fund_date_pla')))
					// 		} else {
					// 			callback()
					// 		}
					// 	},
					// 	trigger: 'blur'
					// }],
					total_tib: [{
						required: true,
						// message: '请输入总算力',
						validator: (rule, value, callback) => {
							if (value === '') {
								callback(new Error(this.$t('contract.total_tib_pla')))
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}],
					fee: [{
						required: true,
						// message: '请输入管理费',
						validator: (rule, value, callback) => {
							if (value === '') {
								callback(new Error(this.$t('contract.fee_pla')))
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}],
				}
			}
		},
		onLoad(e) {
			if (e.contract) {
				let data = Object.assign({}, JSON.parse(decodeURIComponent(e.contract)))
				console.log('data', data)
				this.formData = data
				if (data.start_date) {
					let segs = data.start_date.split("-")
					this.startDate.year = segs[0]
					this.startDate.month = segs[1]
					this.startDate.day = segs[2]
				}
				if (data.fund_date) {
					let segs = data.fund_date.split("-")
					this.fundDate.year = segs[0]
					this.fundDate.month = segs[1]
					this.fundDate.day = segs[2]
				}
			}
		},
		methods: {
			fundDateChange() {
				if (!(this.fundDate.year && this.fundDate.month && this.fundDate.day)) {
					this.formData.fund_date = ''
					return
				}
				this.formData.fund_date = this.fundDate.year + '-' + this.fundDate.month + '-' + this.fundDate.day
			},
			startDateChange() {
				if (!(this.startDate.year && this.startDate.month && this.startDate.day)) {
					this.formData.start_date = ''
					return
				}
				this.formData.start_date = this.startDate.year + '-' + this.startDate.month + '-' + this.startDate.day
			},
			navBack() {
				uni.navigateBack()
			},
			confirm() {
				this.$refs.formData.validate(async (valid) => {
					if (valid) {
						if (this.formData.id) {
							let data = {
								id: this.formData.id,
								contract_num: this.formData.contract_num,
								email: this.formData.email,
								first_name: this.formData.first_name,
								last_name: this.formData.last_name,
								fee: this.formData.fee,
								total_tib: this.formData.total_tib,
								start_date: this.formData.start_date,
								fund_date: this.formData.fund_date,
								is_active: this.formData.is_active
							}
							await updateContract(data)
						} else {
							let data = {
								contract_num: this.formData.contract_num,
								email: this.formData.email,
								first_name: this.formData.first_name,
								last_name: this.formData.last_name,
								fee: this.formData.fee,
								total_tib: this.formData.total_tib,
								start_date: this.formData.start_date,
								fund_date: this.formData.fund_date
							}
							await newContract(data)
						}
						this.success = true
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		}
	}
</script>

<style>

</style>
